<template>
  <div class="articleCell">
    <van-cell
      v-for="(item, index) in artlist"
      :key="index"
      :title="item.title"
      @click="articleDetails(item)"
    >
      <template slot="label">
        <div v-if="item.cover.images.length > 1 ? true : false">
          <img
            v-for="(item2, index) in item.cover.images"
            :key="index"
            style="width: 70px; height: 70px; margin: 10px"
            :src="item2"
            alt=""
          />
        </div>
        <div>
          <span class="aut_name">{{ item.aut_name }}</span>
          <span class="comm_count">{{ item.comm_count }}评论</span>
          <span class="pubdate">{{ item.pubdate | relativeTime }}</span>
        </div>
      </template>
      <template slot="extra">
        <img
          v-if="item.cover.images.length == 1 ? true : false"
          style="width: 70px; height: 70px; margin: 10px"
          :src="item.cover.images[0]"
          alt=""
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    artlist: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  methods: {
    articleDetails(item) {
      console.log(item.art_id)
      this.$router.push({ path: `/article/${item.art_id}` })
    },
  },
}
</script>

<style scoped lang='less'>
.van-cell {
  span {
    margin-bottom: 20px;
    font-size: 30px;
  }
  .aut_name, .comm_count, .pubdate {
    margin-right: 20px;
    color: #b4b4b4;
  }
}
</style>